<template>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <el-header>
      <div class="header-content">
        <div class="logo">Summer Web</div>
        <el-menu :default-active="activeIndex" class="menu-nav" mode="horizontal">
          <el-menu-item index="1">
            <router-link to="/">首页</router-link>
          </el-menu-item>
          <el-menu-item index="2">
            <router-link to="/about">关于</router-link>
          </el-menu-item>
        </el-menu>
      </div>
    </el-header>
    
    <!-- 主内容区 -->
    <el-main>
      <router-view />
    </el-main>
    
    <!-- 页脚 -->
    <el-footer>
      <div class="footer-content">
        Summer Web © 2024
      </div>
    </el-footer>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const activeIndex = ref('1')

// 监听路由变化，更新当前激活的菜单项
const updateActiveIndex = () => {
  const path = route.path
  if (path === '/') {
    activeIndex.value = '1'
  } else if (path === '/about') {
    activeIndex.value = '2'
  }
}

// 初始更新一次
updateActiveIndex()

// 监听路由变化
router.afterEach(() => {
  updateActiveIndex()
})
</script>

<style scoped>
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.logo {
  font-size: 20px;
  font-weight: bold;
  color: #1890ff;
}

.menu-nav {
  width: auto;
}

.footer-content {
  text-align: center;
  color: #666;
}
</style>
